<template>
  <div>
    <el-upload :action="action" :headers="imagesData.headers" :on-change="handleChange" list-type="picture-card" 
      :before-upload="handleBeforeUpload" :on-preview="handlePreview" :on-remove="handleBeforeRemove" :data="imagesData"
      :accept="accept" :on-success="handleSuccess" :on-error="handleError" :file-list="fileList"
      :class="`img-upload-${size}`" :limit="limit" :on-exceed="handleExceed">
      <i class="el-icon-plus"></i>
    </el-upload>
    <p class="tips" style="margin-left: 10px; color: red">
      注：上传图片(限30M)
    </p>
    <el-dialog :visible.sync="dialogVisible" :width="imagesData.width + 150 + 'px'" :center="true">
      <img :width="imagesData.width" :src="dialogImageUrl" alt="" />
    </el-dialog>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        action: `${process.env.VUE_APP_BASE_API}/api/file-service/v1/file/uploadFile`,
        accept: 'image/*',
        imagesData: {
          width: 400,
          height: 400,
          token: localStorage.getItem("token"),
          headers: {}
        },
        dialogImageUrl: '',
        dialogVisible: false
      }
    },
    props: ['value', 'size', 'limit'],
    computed: {
      fileList: function() {
        if (Array.isArray(this.value)) {
          var result = this.value.map(function(value, index, array) {
            return {
              url: value
            }
          })
          return result
        } else {
          return [{
            url: value
          }]
        }
      }
    },
    methods: {
      init() {
        let size = this.size.split('x')
        this.imagesData.width = parseInt(size[0])
        this.imagesData.height = parseInt(size[1])
        this.imagesData.headers = {
          token: (localStorage.token || '')
        }
      },
      handleChange(file, fileList) {},
      handleBeforeUpload(file) {
         
        if (
          file.type !== 'image/jpg' &&
          file.type !== 'image/jpeg' &&
          file.type !== 'image/png' &&
          file.type !== 'image/gif'
        ) {
          this.$message.info('只支持jpg、png、gif格式的图片！')
          return false
        }
        const isLt2M = file.size / 1024 / 1024 < 30;
        if (!isLt2M) {
          this.$message.info("上传图片大小不能超过 30MB!");
          return false;
        }
      },
      handleBeforeRemove(file, fileList) {
        this.$emit('input', this.getValue(fileList))
      },
      handlePreview(file) {
        this.dialogImageUrl = file.url
        this.dialogVisible = true
      },
      handleSuccess(response, file, fileList) {
        const index = fileList.indexOf(file)
        if (response.code !== 1) {
          this.fileList.splice(index, 1)
          this.$message.error(response.message)
        } else {
          fileList[index].url = response.result
          this.$emit('input', this.getValue(fileList))
        }
      },
      getValue(fileList) {
        return fileList.map(function(value, index, array) {
          return value.url
        })
      },
      handleError(err, file, fileList) {
        this.fileList.splice(fileList.indexOf(file), 1)
        this.$message.error('上传失败')
      },
      handleExceed(files, fileList) {
        this.$message.error(`图片最多上传${this.limit}张`)
      }
    },
    created() {
      this.init()
    }
  }
</script>
<style>
  .img-upload-400x400 .el-upload-list__item {
    width: 148px;
    height: 148px;
  }

  .img-upload-400x400 .el-upload--picture-card {
    width: 148px;
    height: 148px;
  }

  .img-upload-400x200 .el-upload-list__item {
    width: 296px;
    height: 148px;
  }

  .img-upload-400x200 .el-upload--picture-card {
    width: 296px;
    height: 148px;
  }

  .img-upload-400x160 .el-upload-list__item {
    width: 370px;
    height: 148px;
  }

  .img-upload-400x160 .el-upload--picture-card {
    width: 370px;
    height: 148px;
  }

  .tips {
    width: max-content;
    font-size: 12px;
    line-height: normal;
    color: #999999;
    margin-top: 5px;
  }
</style>
